<template>
  <div>
    <el-row>
      <el-col v-for="(o, index) in list" :key="list.o" :span="7" :offset="index > 0 ? 2 : 0" style="margin-left: 30px;margin-top: 20px;">
        <el-card shadow="hover" :body-style="{ padding: '0px' }" >
          <el-image  :src="o.head" style="width:200px;height: 200px;"/>
          <div style="padding: 14px">
            <div class="bottom">
              <time class="time"></time>
<!--              {{o.start}}-->

              <span style="letter-spacing:0px;display: inline" >{{o.name}}</span>
<!--              :{{o.aid}}-->
              <!--            <el-button type="text" class="button">图书详情</el-button>-->

              <el-collapse @change="handleChange" style="width: 65%">
                <el-collapse-item title="图书详情" name="1">
                  <div>

                    发行日期:{{o.date}}<br>
                    书籍详情：{{o.brief}}<br>
                    创作背景:{{o.detail}}
                  </div>
                  <div>
                    发行状态:<span v-if="o.state==1" style="color: #5acdc9">已发行</span>
                    <span v-if="o.state==0">未发行</span>
                  </div>
                </el-collapse-item><br/>
               剩余数量： <span>{{o.nums}}</span><br/><br/>
                <span v-if="o.status==='0'">
              活动还有 <CountDown  :endTime="o.start"></CountDown>开始
             </span>
                <span v-if="o.status==='1'">
              活动还有 <CountDown  :endTime="o.end"></CountDown> 结束
             </span>
                <span v-if="o.status==='2'">
              活动已结束
             </span><br/>
                <span v-if="o.status==='1'" disabled="disabled">
                <el-button type="text" @click="show(o)">添加购物车</el-button>
                </span>
                <span v-if="o.status==='0'||'2'" disabled="disabled">
<!--                <el-button type="text" @click="show(o)">添加购物车</el-button>-->
                </span>
              </el-collapse>
              <el-dialog title="图书购买" :visible.sync="dialogVisible" width="30%">
                <el-image :src="url" style="height: 200px;width: 150px"></el-image>
                <br>
                <!--              <el-button type="text" @click="dialogVisible1 = true">点击输入地址</el-button>-->
<!--                <el-select v-model="value" placeholder="请选择">-->
<!--                  <el-option-->
<!--                    v-for="item in options"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--                <el-input v-model="input" placeholder="请输入详细地址" style="width: 53%"></el-input><br>-->
                <span>购买数量:</span>
                <el-input-number v-model="num" @change="handleChange(num)" id="ipt1" :min="0" ref="input1" :max="list.nums" label="描述文字">
                </el-input-number>
                <br><br>
                <!--                {{id}}-->
<!--              <span>这是 {{aid}}</span>-->
                <span>单价:{{price}}</span>
                <br><br>总价钱:
                <input id="span1" v-model="span1" style="border: none" disabled> </input>
                <br><br>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;adds()">确定</el-button>
              </el-dialog>
            </div>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CountDown from "./CountDown";
export default {
  name: "ActivityManager",

  data(){
    return{
      forderadd:{f_User:"",price:""},
      input: '',
      span2:'',
      list:[],
      // frm1:{
      //   id:'',
      //   name:''
      // },
      id:'',
      lists:[],
      Form:{
        price:'', num:'', money:'', book:'',aid:''
      },
      dialogVisible:false,
      dialogVisible1:false,
      url:'',
      price:'',
      span1:'',
      num:0,
      aid:'',
      surplus:'',
      options: [{
        value: '河南', label: '河南'},
        {value: '河北', label: '河北'},
        {value: '安徽', label: '安徽'},
        {value: '北京', label: '北京'},
        {value: '广东', label: '广东'} ,
        {value: '山东', label: '山东'} ,
        {value: '上海', label: '上海'} ,
        {value: '陕西', label: '陕西'} ,
        {value: '山西', label: '山西'} ,
        {value: '内蒙古', label: '内蒙古'} ,
        {value: '浙江', label: '浙江'} ,
        {value: '杭州', label: '杭州'} ,
        {value: '苏州', label: '苏州'}],
      value: ''
    }
  },
  components: {CountDown},
  created() {
    this.$http.post("/activity/select").then(data=>{
      console.log(data)
      this.list=data;
      // this.frm1=data;
    }),
      this.$http.post("img/select").then(data=>{
        this.lists=data
      })
      // this.$http.post('/activity/select2',{aid:this.aid}).then(add=>{
      //     this.surplus=add
      // })
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {})},
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    show(aa){//回显数据到form
      this.dialogVisible=true
      this.url=aa.head,
        this.price=aa.price;
      this.id=aa.id;
      this.aid=aa.aid;
    },
    handleChange(num){
      let a=document.getElementById('span1');
      let b=this.price;
      let c=num*b;
      this.span1=c;
    },
    adds () {
      if(this.num!==0){
        this.$http.post('/activity/select2',{aid:this.aid}).then(add=>{
          //this.surplus=add
          if (add>0&&this.num<=add){
            this.$http.post('/activity/buy',{id:0,fuser:this.$store.state.user.list.id,
              book:this.id,number:this.num,price:this.price*this.num,aid:this.aid}).then(add => {
              if (add > 0) {
                alert("操作成功");
                this.$router.push('/cart')
              } else {
                alert("购买失败")
              }
            })
          }else {
            alert("数量不足，再看看吧")
          }
        })
      }else{
        alert("请至少购买一本图书")
      }


    }
  }


}

</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.el-carousel__item h3 {
  /*background:url("/static/img/img_5.jpg");*/
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {

  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
